<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <title>photoSwipe</title>
    <link rel="stylesheet prefetch" href="libs/photoSwipe/photoswipe.css">
    <link rel="stylesheet prefetch" href="libs/photoSwipe/default-skin/default-skin.css">
</head>

<body>
<!--<ul class="picture-list" style="opacity:0;">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201706/1498634870213.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201706/1498634870328.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073694817.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073694928.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073695027.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073731619.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073731711.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073731789.jpg-tojpg ">
    <img src="http://imgcdn.huixdou.com/uploads/temp/201707/1499073731959.jpg-tojpg ">
</ul>-->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

     <!-- Background of PhotoSwipe.
          It's a separate element as animating opacity is faster than rgba(). -->
     <div class="pswp__bg"></div>

     <!-- Slides wrapper with overflow:hidden. -->
     <div class="pswp__scroll-wrap">

         <!-- Container that holds slides.
             PhotoSwipe keeps only 3 of them in the DOM to save memory.
             Don't modify these 3 pswp__item elements, data is added later on. -->
         <div class="pswp__container">
             <div class="pswp__item"></div>
             <div class="pswp__item"></div>
             <div class="pswp__item"></div>
         </div>

         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
         <div class="pswp__ui pswp__ui--hidden">

             <div class="pswp__top-bar">

                 <!--  Controls are self-explanatory. Order can be changed. -->

                 <div class="pswp__counter"></div>

                 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                 <button class="pswp__button pswp__button--share" title="Share"></button>

                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                 <!-- element will get class pswp__preloader--active when preloader is running -->
                 <div class="pswp__preloader">
                     <div class="pswp__preloader__icn">
                         <div class="pswp__preloader__cut">
                             <div class="pswp__preloader__donut"></div>
                         </div>
                     </div>
                 </div>
             </div>

             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                 <div class="pswp__share-tooltip"></div>
             </div>

             <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
             </button>

             <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
             </button>

             <div class="pswp__caption">
                 <div class="pswp__caption__center"></div>
             </div>

         </div>

     </div>

 </div>
<script src="js/jquery.js"></script>
<script src="libs/photoSwipe/photoswipe.js"></script>
<script src="libs/photoSwipe/photoswipe-ui-default.min.js"></script>
<script>
    $(function () {

        var photoArr=[
            "http://imgcdn.huixdou.com/uploads/temp/201706/11asd.jpg",

            "http://imgcdn.huixdou.com/uploads/temp/201706/1498634870213.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201706/1498634870328.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073694817.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073694928.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073695027.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073731619.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073731711.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073731789.jpg",
            "http://imgcdn.huixdou.com/uploads/temp/201707/1499073731959.jpg"
        ];

       /* var defereds = [];
        var items=[];
        $.each(photoArr,function(k,url) {

           var img = new Image();
            img.src= url;
            var dfd = $.Deferred();
            $(img).load(dfd.resolve);
            items.push({
                src: img.src,
                w: img.width,
                h: img.height
            });
            defereds.push(dfd);

        });

        $.when.apply(null, defereds).done(function() {

            console.log('load compeleted');
            var pswpElement = document.querySelectorAll('.pswp')[0];
            var options = {
                history: false,
                pinchToClose:false,
                index: 3 // start at first slide
            };

            var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        });*/


        var items=[];
        var zoom= 1000
        function loadImg(arr) {
            for(var i=0; i<arr.length; i++){
                $.ajax({
                    type:"GET",
                    async:false,
                    url: arr[i]+"?imageInfo"
                }).done(function(res) {
                   console.log(res)
                    var ratio = res.height/res.width

                    items.push({
                        src: arr[i]+"-tojpg",
                        w: res.width+zoom,
                        h: res.height+(ratio*zoom)
                    })

                }).fail(function () {
                    items.push({
                        src: "images/imgError.png",
                        w: 100,
                        h: 75
                    })
                });
            }
            var pswpElement = document.querySelectorAll('.pswp')[0];
            var options = {
                history: false,
                pinchToClose:false,
                tapToClose: false,
                closeOnVerticalDrag:false,
                index: 0, // start at first slide

                closeEl:false,
                captionEl: false,
                fullscreenEl: false,
                zoomEl: false,
                shareEl: false,
                arrowEl: false,
                preloaderEl: false
            };

            var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        }
        loadImg(photoArr)








    })

</script>
</body>
</html>